<script>
import { GlCard, GlButton, GlSprintf, GlLink, GlIcon, GlBadge } from '@gitlab/ui';
import { s__, __ } from '~/locale';
import { convertToGraphQLId } from '~/graphql_shared/utils';
import { TYPENAME_VULNERABILITY } from '~/graphql_shared/constants';
import { helpPagePath } from '~/helpers/help_page_helper';
import ExplainVulnerabilityPrompt from './explain_vulnerability_prompt.vue';
import ExplainVulnerabilityDrawer from './explain_vulnerability_drawer.vue';

export default {
  components: {
    GlCard,
    GlButton,
    GlSprintf,
    GlLink,
    GlIcon,
    GlBadge,
    ExplainVulnerabilityPrompt,
    ExplainVulnerabilityDrawer,
  },
  props: {
    vulnerability: { type: Object, required: true },
  },
  data() {
    return {
      isLoadingPrompt: false,
      isDrawerOpen: false,
      includeSourceCode: false,
    };
  },
  computed: {
    vulnerabilityGraphqlId() {
      return convertToGraphQLId(TYPENAME_VULNERABILITY, this.vulnerability.id);
    },
  },
  methods: {
    updateIsLoadingPrompt(isLoadingPrompt) {
      this.isLoadingPrompt = isLoadingPrompt;
    },
    updateIncludeSourceCode(includeSourceCode) {
      this.includeSourceCode = includeSourceCode;
    },
  },
  i18n: {
    cardTitle: s__('Vulnerability|Explain this vulnerability and how to mitigate it with AI'),
    cardText: s__(
      'Vulnerability|This is a beta feature that uses AI to explain the vulnerability and provide recommendations. Use this feature with caution as we continue to iterate. Please provide your feedback and ideas in %{linkStart}this issue%{linkEnd}.',
    ),
    buttonText: s__('Vulnerability|Try it out'),
    maturityLabel: __('Beta'),
  },
  feedbackIssueHref: 'https://gitlab.com/gitlab-org/gitlab/-/issues/413553',
  maturityDocHref: helpPagePath('policy/experiment-beta-support', { anchor: 'beta' }),
};
</script>

<template>
  <gl-card class="gl-banner-introduction gl-border-none!">
    <div class="gl-mb-3">
      <gl-icon name="tanuki-ai" class="gl-mr-2 gl-text-blue-600" />
      <span class="gl-font-weight-bold">{{ $options.i18n.cardTitle }}</span>
      <gl-badge variant="neutral" size="sm" class="gl-ml-2" :href="$options.maturityDocHref">
        {{ $options.i18n.maturityLabel }}
      </gl-badge>
    </div>
    <p class="gl-mb-3!">
      <gl-sprintf :message="$options.i18n.cardText">
        <template #link="{ content }">
          <gl-link :href="$options.feedbackIssueHref" target="_blank">{{ content }}</gl-link>
        </template>
      </gl-sprintf>
    </p>

    <explain-vulnerability-prompt
      :vulnerability-graphql-id="vulnerabilityGraphqlId"
      :is-drawer-open="isDrawerOpen"
      @loading-state-changed="updateIsLoadingPrompt"
      @checkbox-changed="updateIncludeSourceCode"
    />

    <gl-button
      variant="confirm"
      icon="tanuki-ai"
      :disabled="isDrawerOpen"
      :loading="isLoadingPrompt"
      data-testid="try-button"
      @click="isDrawerOpen = true"
    >
      {{ $options.i18n.buttonText }}
    </gl-button>

    <explain-vulnerability-drawer
      :is-open="isDrawerOpen"
      :vulnerability="vulnerability"
      :include-source-code="includeSourceCode"
      @close="isDrawerOpen = false"
    />
  </gl-card>
</template>
